<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <style>
        body, html
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;

        }
    </style>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/webjars/jquery/jquery.js"></script>
</head>
<body>
<table id="roleInfo" lay-filter="roleInfo" class="layui-hide">
</table>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="addRole" th:classappend="${insertReadonly}"><i class="layui-icon"></i>添加
        </button>
        <button class="layui-btn" lay-event="deleteRole" th:classappend="${deleteReadonly}"><i class="layui-icon"></i>删除
        </button>
        <button class="layui-btn" lay-event="getCheckData">获取数据</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" th:classappend="${deleteReadonly}" lay-event="del">删除</button>
</script>
<script type="text/html" id="addRole">
    <div style="padding: 50px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名</label>
                <div class="layui-input-block">
                    <input type="text" name="rName" required lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描&#160;述</label>
                <div class="layui-input-inline">
                    <input type="text" name="rDescription"  placeholder="可选"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    layui.use(['table','form'],function () {
        var table = layui.table
            , form = layui.form;
        var insertRole;
        var rinfo = [
            {type: 'checkbox', fixed: 'left'}
            , {field: 'rId', title: 'ID', sort: true, fixed: 'left'}
            , {field: 'rName', title: 'NAME', sort: true, fixed: 'left'}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ];
        table.render({
            elem: '#roleInfo'
            , url: '/roleInfo/all' //数据接口
            , toolbar: '#toolbarDemo'
            , title: '用户角色表'
            , cols: [rinfo]
            , response: {
                statusCode: 200
            }
            , page: true //开启分页
        });
        table.on('toolbar(roleInfo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'getCheckData') {
                var data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            } else if (obj.event === 'addRole') {
                insertRole = layer.open({
                    type: 1,
                    title: '添加角色',
                    skin: 'layui-layer-rim', //加上边框
                    area: '460px', //宽高
                    content: $('#addRole').html(),
                });
                form.render();
                table.reload('roleInfo');
            } else if (obj.event === 'deleteRole') {
                var data = checkStatus.data;
                if (data.length > 0) {
                    layer.confirm('真的删除行么', function (index) {
                        //删除
                        layer.close(index);
                        $.ajax({
                            url: 'roleInfo/all/',
                            type: 'delete',
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            success: function (data) {
                                //重新渲染table
                                table.reload('roleInfo');
                            }
                        });
                    });
                }
                ;
            }
            ;
        });
        //监听工具条
        table.on('tool(roleInfo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.rId + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index)
                    //删除
                    $.ajax({
                        url: 'roleInfo/role/' + data.rId,
                        type: 'delete',
                        success: function (data) {
                            console.log("删除成功");
                        }
                    })
                });
            }
        });
        //监听用户添加
        form.on('submit(formDemo)', function (data) {
            console.log(JSON.stringify(data.field));
            $.ajax({
                url: 'roleInfo/role',
                type: 'post',
                data: JSON.stringify(data.field),
                traditional: true,
                contentType: "application/json",
                success: function (data) {
                    if (data.code==200) {
                        layer.msg("添加成功");
                    }else{
                        layer.msg("添加失败："+data.msg);
                    }
                    //关闭弹窗
                    layer.close(insertRole);
                    table.reload('roleInfo');
                }
            });
            return false;
        });
    })
</script>
</html>